<template>
  <div class="dashboard-container">
    <el-card>
      <div class="dashboard-text">
        <el-form :inline="true" :model="churumingxi" class="demo-form-inline">
          <el-form-item label="仓库" style="width: 300px;">
            <el-select :disabled="true" v-model="churumingxi.billStage" placeholder="请选择">
              <el-option v-for="item in churumingxi.billStage" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物料" style="width: 25%;">
            <el-select :disabled="true" v-model="churumingxi.billStage" placeholder="请选择">
              <el-option v-for="item in churumingxi.billStage" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="批次" style="width: 50%;" v-if="shuxing">
            <el-input v-model="sou.batchNo_begin" placeholder="请输入最小值" style="width: 45%; float: left;"></el-input>
            <span style="float: left;">~</span>
            <el-input v-model="sou.batchNo_end" placeholder="请输入最大值" style="width: 45%; float: left;"></el-input>
          </el-form-item>
          <el-form-item label="供应商" style="width: 300px;" v-if="shuxing">
            <el-select :disabled="true" v-model="churumingxi.billStage" placeholder="请选择">
              <el-option v-for="item in churumingxi.billStage" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="已关闭" style="width: 300px;" v-if="shuxing">
            <el-select :disabled="true" v-model="this.fou" placeholder="请选择">
              <el-option v-for="item in churumingxi.billStage" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>








          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click=" sousuo()">查询</el-button>
            <el-button icon="el-icon-refresh-right" @click="   chongzhi()">重置</el-button>
            <span class=" el-icon-arrow-down" @click="zhankai" style="color: #1890ff;" v-if="!shuxing">展开</span>
            <span class="el-icon-arrow-up" @click="zhankai" style="color: #1890ff;" v-if="shuxing">收起</span>
          </el-form-item>
        </el-form>

      </div>

      <!-- 新增 导出 导入 自定义 -->
      <div class="fn">

        <i class="el-icon-download" @click="Export">导出</i>
        <i class="el-icon-document-add">导入</i>
        <span style="color: #1890ff;">共选中{{ selectedtotal }}项</span>
        <div trigger="click" class="jia_right">
          <el-popover placement="right" width="400" trigger="click">

            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>自定义列</span>

              </div>
              <div>
                <div class="zidingyi_listt" style="height: 344px;">
                  <div class="left">
                    <div class="zidingyi_list"> <input disabled="disabled" type="checkbox" v-model="ischeck">#
                    </div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.materialCode" :checked="con"
                        type="checkbox">物料编码</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.materialId_dictText" :checked="con"
                        type="checkbox">物料名称</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.materialModel" :checked="con"
                        type="checkbox">规格型号</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.batchNo" :checked="con"
                        type="checkbox">批次
                    </div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.warehouseId_dictText" :checked="con"
                        type="checkbox">仓库</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.unitId_dictText" :checked="con"
                        type="checkbox">单位</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.qty" :checked="con" type="checkbox">数量
                    </div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.cost" :checked="con" type="checkbox">金额
                    </div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.unitCost" :checked="con"
                        type="checkbox">单位金额</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.isClosed_dictText" :checked="con"
                        type="checkbox">单个供应商</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.supplierId_dictText" :checked="con"
                        type="checkbox">最后供应商</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.isSingleSupplier_dictText"
                        :checked="con" type="checkbox">已关闭</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.createTime" :checked="con"
                        type="checkbox">创建时间</div>
                    <div class="zidingyi_list"> <input disabled="disabled" type="checkbox" v-model="ischeck">操作
                    </div>
                  </div>
                  <div class="right">
                    <div class="zidingyi_list"><input v-model="columnVisibility.sysOrgCode_dictText" :checked="con"
                        type="checkbox">创建部门</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.updateBy_dictText" :checked="con"
                        type="checkbox">创建人</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.updateTime" :checked="con"
                        type="checkbox">修改时间</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.updateBy_dictText" :checked="con"
                        type="checkbox">修改人</div>

                  </div>
                </div>

              </div>
            </el-card>
            <button class="aaa" slot="reference"><i class="el-icon-setting"></i>自定义列</button>
          </el-popover>
        </div>
      </div>

      <!-- 列表渲染 -->
      <div class="table">

        <el-table id="table_excel" :data="tableData" border style="width: 100%; " @selection-change="selectionnum">
          <el-table-column fixed type="selection" width="55">
          </el-table-column>
          <el-table-column fixed type="index" label="#" :index="indexMethod">
          </el-table-column>
          <el-table-column fixed prop="materialCode" label="物料编码" width="150" v-if="columnVisibility.materialCode">
            <template slot-scope="scope">
              <el-button @click="dialog = true" type="text" size="small">{{ scope.row.materialCode }}</el-button>

            </template>
          </el-table-column>

          <el-table-column fixed prop="materialId_dictText" label="物料名称" width="120"
            v-if="columnVisibility.materialId_dictText">
          </el-table-column>
          <el-table-column prop="materialModel" label="规格型号" width="120" v-if="columnVisibility.materialModel">
          </el-table-column>
          <el-table-column prop="batchNo" label="批次" width="300" v-if="columnVisibility.batchNo">
          </el-table-column>
          <el-table-column prop="warehouseId_dictText" label="仓库" width="120"
            v-if="columnVisibility.warehouseId_dictText">
          </el-table-column>
          <el-table-column prop="unitId_dictText" label="单位" width="120" v-if="columnVisibility.unitId_dictText">
          </el-table-column>
          <el-table-column prop="qty" label="数量" width="120" v-if="columnVisibility.qty">
          </el-table-column>
          <el-table-column prop="cost" label="金额" width="120" v-if="columnVisibility.cost">
          </el-table-column>
          <el-table-column prop="unitCost" label="单位金额" width="120" v-if="columnVisibility.unitCost">
          </el-table-column>
          <el-table-column prop="isSingleSupplier_dictText" label="单个供应商" width="120"
            v-if="columnVisibility.isClosed_dictText">
          </el-table-column>
          <el-table-column prop="supplierId_dictText" label="最后供应商" width="250"
            v-if="columnVisibility.supplierId_dictText">
          </el-table-column>
          <el-table-column prop="isClosed_dictText" label="已关闭" width="120"
            v-if="columnVisibility.isSingleSupplier_dictText">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="200" v-if="columnVisibility.createTime">
          </el-table-column>
          <el-table-column prop="sysOrgCode_dictText" label="创建部门" width="120"
            v-if="columnVisibility.sysOrgCode_dictText">
          </el-table-column>
          <el-table-column prop="updateBy_dictText" label="创建人" width="120" v-if="columnVisibility.updateBy_dictText">
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间" width="200" v-if="columnVisibility.updateTime">
          </el-table-column>
          <el-table-column prop="updateBy_dictText" label="修改人" width="120" v-if="columnVisibility.updateBy_dictText">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="dialog = true" type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">更多</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
    </el-card>

    <!-- 编辑信息弹出 -->
    <div>
      <el-drawer title="详细库存 - 编辑" :before-close="handleClose" :visible.sync="dialog" direction="rtl"
        custom-class="demo-drawer" ref="drawer">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="物料编码" style="margin-top: 20px;">
            <el-input :disabled="true" v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="物料名称" prop="region" style="margin-top: 20px;">
            <el-select :disabled="true" v-model="ruleForm.region" placeholder="请选择活动区域">
              <!-- <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="规格型号" style="margin-top: 20px;">
            <el-input :disabled="true" v-model="ruleForm.name1"></el-input>
          </el-form-item>
          <el-form-item label="批次" style="margin-top: 20px;">
            <el-input :disabled="true" v-model="ruleForm.name2"></el-input>
          </el-form-item>
          <el-form-item label="仓库" prop="region" style="margin-top: 20px;">
            <el-select :disabled="true" v-model="ruleForm.region2" placeholder="请选择活动区域">
              <!-- <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="单位" prop="region" style="margin-top: 20px;">
            <el-select :disabled="true" v-model="ruleForm.region3" placeholder="请选择活动区域">
              <!-- <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="数量" style="margin-top: 20px;">
            <el-input :disabled="true" v-model="ruleForm.name3"></el-input>
          </el-form-item>
          <el-form-item label="金额" style="margin-top: 20px;">
            <el-input :disabled="true" v-model="ruleForm.name4"></el-input>
          </el-form-item>
          <el-form-item label="单位金额" style="margin-top: 20px;">
            <el-input :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="单个供应商" prop="region" style="margin-top: 20px;">
            <el-select v-model="ruleForm.region4" placeholder="请选择活动区域">
              <el-option label="是" value="shanghai"></el-option>
              <el-option label="否" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="最后供应商" prop="region" style="margin-top: 20px;">
            <el-select :disabled="true" v-model="ruleForm.region5" placeholder="请选择活动区域">
              <!-- <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="已关闭" prop="region" style="margin-top: 20px;">
            <el-select v-model="ruleForm.region6" placeholder="请选择活动区域">
              <el-option label="是" value="shanghai"></el-option>
              <el-option label="否" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <span class=" el-icon-arrow-down" @click="zhankai1"
            style="color: #1890ff; margin-left: 30px; margin-bottom: 20px; margin-top: 20px;"
            v-if="!shuxing1">操作信息</span>
          <span class=" el-icon-arrow-up" @click="zhankai1"
            style="color: #1890ff; margin-left: 30px; margin-bottom: 20px; margin-top: 20px;"
            v-if="shuxing1">操作信息</span>

          <div class="block" style="margin-left: 30px;" v-if="shuxing1">
            <span class="demonstration">创建时间</span>
            <el-date-picker :disabled="true" v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
          <el-form-item v-if="shuxing1" label="创建部门" prop="region" style="margin-top: 20px;">
            <el-select :disabled="true" v-model="ruleForm.region7" placeholder="请选择活动区域">
              <!-- <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item v-if="shuxing1" label="创建人" prop="region" style="margin-top: 20px;">
            <el-select :disabled="true" v-model="ruleForm.region8" placeholder="请选择活动区域">
              <!-- <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <div v-if="shuxing1" class="block" style="margin-left: 30px;">
            <span class="demonstration">修改时间</span>
            <el-date-picker :disabled="true" v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
          <el-form-item v-if="shuxing1" label="修改人" prop="region" style="margin-top: 20px; margin-bottom: 100px;">
            <el-select :disabled="true" v-model="ruleForm.region9" placeholder="请选择活动区域">
              <!-- <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button @click="cancelForm()">取消</el-button>
            <el-button type="primary" @click="cancelForm()">确定</el-button>

          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
    <div class="page">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30]" :current-page="this.current" :page-size="this.size"
        layout="total, sizes, prev, pager, next, jumper" :total="this.total">
      </el-pagination>
    </div>

  </div>
</template>
<script>
import { Xiangxikucun } from '@/api/kj';
export default {
  data() {
    return {
      // 采购订单明细
      table: [],
      //导出标题
      title: "详细入库表格",
      //自定义列表
      columnVisibility: {
        materialModel: true,
        batchNo: true,
        subject: true,
        warehouseId_dictText: true,
        unitId_dictText: true,
        qty: true,
        cost: true,
        unitCost: true,
        isClosed_dictText: true,
        supplierId_dictText: true,
        isSingleSupplier_dictText: true,
        createTime: true,
        sysOrgCode_dictText: true,
        updateBy_dictText: true,
        // hasRp_dictText: true,
        // hasSwell_dictText: true,
        // isClosed_dictText: true,
        // isAuto_dictText: true,
        // isEffective_dictText: true,
        // bpmiInstanceId: true,
        // effectiveTime: true,
        // approver_dictText: true,
        // createTime: true,
        // createBy_dictText: true,
        // sysOrgCode_dictText: true,
        // updateTime: true,
        // updateBy_dictText: true,
        materialCode: true
      },
      //选中数量
      selectedtotal: 0,
      //发票类型下拉选择
      options: [{
        value: '选项1',
        label: '请选择'
      }, {
        value: '选项2',
        label: '不开票'
      }, {
        value: '选项3',
        label: '普通发票'
      }, {
        value: '选项4',
        label: '专用发票'
      }, {
        value: '选项5',
        label: '专用增值税发票'
      }, {
        value: '选项6',
        label: '收据'
      }, {
        value: '选项7',
        label: '其他'
      }],
      //对话框放大
      bigscreen: false,
      //新增对话框
      dialogFormVisible: false,

      // 验证
      value1: '	2025-01-10',
      value2: '2025-01-13',
      ruleForm: {
        name: ' 67-56-1-1',
        name1: '纯度99.9%',
        name2: 'QTRK-221120-002-10',
        name3: '0.000	',
        name4: '0.00	',
        region: '甲醇11',
        region2: '一仓一区01位',
        region3: '千克',
        region4: '是',
        region5: '1584950950470164481',
        region6: '是',
        region7: '市场部',
        region8: '管理员',
        region9: '管理员',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      },
      // 编辑
      // table: false,
      dialog: false,
      loading: false,
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '100px',
      timer: null,

      // 选中
      con: true,
      ischeck: true,
      shuxing: false,
      shuxing1: false,
      // shuxing1: false,

      value: '',
      value3: '',
      size: 10,
      total: 0,
      current: 1,
      fou: '否',
      sou: {
        isClosed: 0,
        batchNo_begin: '',
        batchNo_end: '',

        pageNo: 1,
        pageSize: 10,
        field: 'id,,,materialCode,materialId_dictText,materialModel,batchNo,warehouseId_dictText,unitId_dictText,qty,cost,unitCost,isSingleSupplier_dictText,supplierId_dictText,isClosed_dictText,createTime,sysOrgCode_dictText,createBy_dictText,updateTime,updateBy_dictText,action',
        order: 'desc',
        column: 'createTime'
      },
      sousuomingxi: {

        year: '2022',
        month: 1,

        pageNo: 1,
        pageSize: 10,

      },
      churumingxi: {
        column: 'createTime',
        order: 'desc',
        field: 'id,,,materialCode,materialId_dictText,materialModel,batchNo,warehouseId_dictText,unitId_dictText,qty,cost,unitCost,isSingleSupplier_dictText,supplierId_dictText,isClosed_dictText,createTime,sysOrgCode_dictText,createBy_dictText,updateTime,updateBy_dictText,action',
        pageNo: 1,
        pageSize: 10
      },



      tableData: []
    }
  },
  mounted() {
    this.getdata()
  },
  methods: {
    // 分页器
    handleSizeChange(val) {
      this.churumingxi.pageSize = val;
      this.churumingxi.pageNo = 1;
      this.getdata()

      // console.log(`每页 ${val} 条`); ``
    },
    handleCurrentChange(val) {
      this.churumingxi.pageNo = val;

      // console.log(`当前页: ${val}`);
      this.getdata()

    },
    //选中数量
    selectionnum(selection) {
      this.selectedtotal = selection.length;
    },
    // 验证
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    // 排列
    indexMethod(index) {
      return index * 1 + 1;
    },
    // 分页器
    handleSizeChange(val) {
      this.churumingxi.pageSize = val;
      this.churumingxi.pageNo = 1;
      this.getdata()

      // console.log(`每页 ${val} 条`); ``
    },
    handleCurrentChange(val) {
      this.churumingxi.pageNo = val;

      // console.log(`当前页: ${val}`);
      this.getdata()

    },
    onSubmit() {
      console.log('submit!');
    },
    //展开
    zhankai() {
      this.shuxing = !this.shuxing
    },
    zhankai1() {
      this.shuxing1 = !this.shuxing1
    },
    handleClick(row) {
      console.log(row);
    },
    formatter(row, column) {
      return row.date;
    },
    // 更新页面
    async getdata() {


      let { result } = await Xiangxikucun(
        this.churumingxi
      )

      console.log(result);
      console.log(this.tableData + 'attatata');
      this.total = result.total
      this.size = result.size
      console.log(result.total, result.size);

      this.current = result.current
      this.tableData = result.records

    },
    // 查询
    async sousuo() {

      if (this.sou.batch_no == '') {
        this.getdata()
      }
      else {
        let { result } = await Xiangxikucun(
          this.sou
        )
        console.log(result);
        console.log(this.tableData + 'attatata');
        this.total = result.total
        this.size = result.size
        console.log(result.total, result.size);
        this.current = result.current
        this.tableData = result.records
      }



    },
    //  重置
    chongzhi() {
      this.sou.batch_no = ''
      // this.churumingxi.batch_no = ''
      this.getdata()
    },
    Export() {
      this.$confirm("确定要导出文件到Excel?", "导出提示", {
        //这里是加一个导出提示，根据个人喜好，可加可不加   
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      }).then(() => {
        setTimeout(() => {
          var xlsxParam = { raw: true }  // 导出的内容只做解析，不进行格式转换
          let tables = document.getElementById('table_excel');   //这里是绑定元素，输入你要导出的table表格的id
          let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
          const table_write = this.$XLSX.write(table_book, {
            bookType: "xlsx",
            bookSST: true,
            type: "array",
          });
          try {
            this.$FileSaver.saveAs(
              new Blob([table_write], { type: "application/octet-stream" }), `${this.title}.xlsx`   //这里是文件名
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, table_write);
          }
          return table_write;
        }, 1000)
      })
    }

  },


}

</script>

<style scoped>
.fn {

  .el-icon-plus,
  .el-icon-download,
  .el-icon-document-add {
    padding: 5px;
    color: #66b1ff;
    cursor: pointer;
    margin: 5px 10px;
    font-size: 14px;
  }

  .el-dialog {
    width: 80%;

    .one {
      width: 100%;
      display: flex;
      margin-bottom: 10px;

      .el-select {
        width: 75px;
        margin-left: 10px;
      }


    }

    .two {
      width: 100%;
      display: flex;
      margin-bottom: 10px;

      .el-input-group {
        margin-left: 10px;
      }
    }

    .three {
      width: 100%;
      display: flex;
      margin-bottom: 10px;

    }

    .four {
      width: 100%;
      display: flex;
    }
  }

}
</style>

<style lang="scss" scoped>
::v-deep .el-drawer {
  overflow: auto;
}

.zidingyi_listt {
  display: flex;
}

.jia_right {
  float: right;
}

.zidingyi {
  width: 442px;
  height: 271px;
  border: 1px solid;
  overflow: hidden;
  position: absolute;
  z-index: 100;
}

.dashboard {
  &-container {
    margin: 5px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
<style scoped>
.el-date-editor {
  width: 150px;
  height: 30px;
  /* 你可以根据需要调整这个高度 */
  line-height: 10px;
  /* 保持行高与高度一致，以确保文字垂直居中 */
}

.line {
  text-align: center;
}

.el-form-item {
  margin-bottom: 0px;
}
</style>
